<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: blue;
        }

        .delete {
            color: burlywood;
        }

        .error {
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>Class 绑定,V-bind:class 或 :calss</h2>
        <p class="active">字符串表达式</p>
        <p :class="activeClass">字符串表达式</p>
        <p v-bind:class="activeClass">字符串表达式</p>
        <hr>
        <!-- key值是样式名,value值是data中绑定的属性 当isDelete为true时
        ,delete就会进行渲染 -->
        <p :class="{delete:isDelete,error:hasError}">对象表达式</p>
        <p :class="['active','error']">对象表达式</p>

        <h3>Style绑定 v-bind:style或:style</h3>
        <p :style="{color:activeColor,fontSize:fontSize+'px'}">Style绑定 v-bind:style或:style</p>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                activeClass: 'delete',
                isDelete: false,
                hasError: true,
                activeColor:'red',
                fontSize: 30
            }
        })
    </script>
</body>

</html>